<template>
<el-row :gutter="20">
  <el-col :xs="2" :sm="2" :md="2" :lg="2">
    <div class="grid-content">
      <div class="isDisplay" @click="isDisplay">
      <i v-show="isCollapse" class="el-icon-s-unfold"></i>
      <i v-show="!isCollapse" class="el-icon-s-fold"></i>
      </div>
    </div>
  </el-col>
  <el-col :xs="0" :sm="8" :md="10" :lg="12">
    <div class=" hidden-xs-only  grid-content"><span class="headerTitle">后台管理系统</span></div>
  </el-col>
  <el-col  :xs="22" :sm="14" :md="12" :lg="10">
    <div class="grid-content bg-purple">
      <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3"><div class="grid-content bg-purple">
        <el-tooltip class="item" effect="dark" content="站内搜索" placement="bottom">
          <i class="el-icon-zoom-in"></i>
        </el-tooltip>
      </div></el-col>
      <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
        <div class="grid-content bg-purple">
          <el-tooltip class="item" effect="dark" content="全屏" placement="bottom">
            <i class="el-icon-full-screen"></i>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
        <div class="grid-content bg-purple">
          <el-tooltip class="item" effect="dark" content="多语言" placement="bottom">
            <i class="el-icon-more"></i>
          </el-tooltip>
        </div>
      </el-col>
      <el-col :xs="2" :sm="3" :md="3" :lg="5" :xl="3">
        <div class="grid-content bg-purple">
          <el-dropdown trigger="click" >
            <span class="el-dropdown-link">
              <el-tooltip class="item" effect="dark" content="换肤" placement="bottom">
                <i class="el-icon-more"></i>
                </el-tooltip>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>白天</el-dropdown-item>
              <el-dropdown-item>夜晚</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
      <el-col :xs="13" :sm="12" :md="10" :lg="8" :xl="12">
        <div class="grid-content bg-purple">
            <img class="avatar" :src="userInfo.profile" alt="">
            <el-dropdown>
              <span class="avatarState el-dropdown-link">
                {{userInfo.identity}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-plus">
                  <el-button type="text" @click="goHome">前台首页</el-button>
                </el-dropdown-item>
                <el-dropdown-item icon="el-icon-circle-plus">
                  <el-button type="text" @click="logoutBtn">退出登录</el-button>
                </el-dropdown-item> 
              </el-dropdown-menu>
            </el-dropdown>
        </div>
      </el-col>
    </div>
  </el-col>
</el-row>
  
</template>
<script>
import {logout} from '@/api/user'
export default {
  name: "myHeader",
  data(){
    return {
      userInfo:''
    }
  },
  methods: {
    isDisplay() {
      this.$store.commit("Tab/changeCollapse");
    },
    // 身份识别
    identity(){
      if(this.userInfo.identity == 0){
        this.userInfo.identity = '超管'
      }else if(this.userInfo.identity == 1){
        this.userInfo.identity = '管理员'
      }else if(this.userInfo.identity == 2){
        this.userInfo.identity = '用户'
      }else if(this.userInfo.identity == 3){
        this.userInfo.identity = '游客'
      }else if(this.userInfo.identity == 4){
        this.userInfo.identity = '测试'
      }
    },
    // 退出登录
    async logout(){
      const res = await logout()
      if(res.data.code == 200){
        this.$router.push('/login')
      }else{
        this.$message.error('res.data.msg')
      }
    },
    logoutBtn() {
        this.$confirm('确定退出?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          localStorage.clear('userInfo','token')
          this.logout()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      goHome(){
        this.$router.push('/home')
      }
  },
  computed: {
    isCollapse() {
      return this.$store.state.Tab.isCollapse;
    }
  },
  mounted(){
    this.userInfo = JSON.parse(localStorage.getItem('userInfo')) 
    this.identity()
  }
}
</script>
<style  lang="less" scoped>
.el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
    .isDisplay{
      cursor: pointer;
      i{
        font-size: 24px;
      }
    }
    .headerTitle{
      font-size: 24px;
    }
    .avatar{
      width: 40px;
      height: 40px;
      position: absolute;
      margin-top: 10px;
    }
    .avatarState{
      margin-left: 50px;
      color: white;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    height: 60px !important;
  }
  .row-bg {
    background-color: #f9fafc;
  }
</style>